<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子节点和父节点的操作</title>
	<style type="text/css">
		li{
			height: 18px;
			list-style: none;
		}

	</style>
    <script type="text/javascript">
		window.onload=function(){
			//子节点的操作
			var ul=document.getElementById('box');
			 console.log(ul.children.length);
			 for (var i = 0; i < ul.children.length; i++) {
			 		ul.children[i].style.background='red';
			 }



			//parentNode 父节点
			var a=ul.getElementsByTagName('a');
			console.log(a[0]);
			console.log(a[0].parentNode);
			for (var i = 0; i <a.length; i++) {
				a[i].onclick=function(){
					//隐藏A链接的父级LI节点
					this.parentNode.style.display="none";
				}
			};
		}
    </script>
</head>
<body>
	<ul id="box">
	   <li>A<a href="javascript:;">隐藏</a></li>
	   <li>B<a href="javascript:;">隐藏</a></li>
	   <li>C<a href="javascript:;">隐藏</a></li>
	   <li>D<a href="javascript:;">隐藏</a></li>
	   <li>E<a href="javascript:;">隐藏</a></li>
	   <li>F<a href="javascript:;">隐藏</a></li>
	</ul>
</body>
</html>